<template>
	<view>
		<view class="detail-title2">
			备件申请单号：{{listInfo.refundNum}}
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">工单信息</view>
			<view class="right-title">{{listInfo.applyNum}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">申请退还数量</view>
			<view class="right-title">{{listInfo.refundAmount}}</view>
		</view>
		<!-- <view class="detail-title white-bg detail-title-border">
			<view class="left-title">备注信息</view>
			<view class="right-title">{{listInfo.remark}}</view>
		</view> -->
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">退还申请人</view>
			<view class="right-title">{{listInfo.refundUserName}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">退还审批人</view>
			<view class="right-title">{{listInfo.dealUserName}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">申请时间</view>
			<view class="right-title">{{listInfo.createTime}}</view>
		</view>
		<view v-if="listInfo.dealStatus==0">
			<view class="search-title">
				<view>备件退还列表</view>
			</view>
			<view class="search-list">
				<view class="search-item detail-title-border" v-for="(item,index) in listInfo.partDetailResponses" :key="index">
					<view class="item-top">
						<view class="item-txt">
							<view class="left-icon">
								<image
									:src="item.partPicture?item.partPicture:'../../../static/images/index/weibaorenwu.png'">
								</image>
							</view>
							<view class="right-txt">
								<view class="txt-left">
									<view class="txt1">{{item.partNum}}{{item.partName}}</view>
									<!-- <view class="txt-status">待提交</view> -->
								</view>
								<view class="txt-right">
									<view class="txt2">{{item.partTypeName}}</view>
									<view class="addnum">
										退还数量：<text style="color: #2f2f2f;">{{item.amount}}</text>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="listInfo.dealStatus==1">
			<view class="search-title">
				<view>退还审批信息</view>
<!-- 				<view class="right-title">
					{{listInfo.dealResult==1?'全部退还':listInfo.dealResult==2?'部分退还':listInfo.dealResult==3?'未退还':''}}
				</view> -->
				<view class="status"
					:class="[listInfo.dealResult==1?'title-qbth':listInfo.dealResult==2?'title-bfth':dataInfo.repairStatus==3?'title-noth':'']">
					{{listInfo.dealResult==1?'全部退还':listInfo.dealResult==2?'部分退还':listInfo.dealResult==3?'未退还':''}}
				</view>
			</view>
			<view class="padding7 white-bg detail-title-border">
				<view>退还备件信息</view>
				<view class="color6" style="margin-top: 10px;">
					<view>实际退还总数量：{{listInfo.totalAmount}};退还备件价值：{{listInfo.refundFee}}元</view>
				</view>
			</view>
			<!-- 			<view class="tuihuan">
				<view class="txt-item">
					<view class="txt-title">退还备件信息</view>
					<view class="txt-main">
						<view>退还总数量：{{listInfo.totalAmount}} </view>
						<view>退还备件价值：{{listInfo.refundFee}}元 </view>
					</view>
				</view>
			</view> -->
			<view>
				<view class="search-list" v-for="(item,index) in listInfo.partDetailResponses" :key="index">
					<u-gap height="8" bgColor="#f2f2f2" v-if="index>0"></u-gap>
					<view class="search-item">
						<view class="item-top">
							<view class="item-txt">
								<view class="left-icon">
									<image
										:src="item.partPicture?item.partPicture:'../../../static/images/index/weibaorenwu.png'">
									</image>
								</view>
								<view class="right-txt">
									<view class="txt-left">
										<view class="txt1">{{item.partNum}}{{item.partName}}</view>
									</view>
									<view class="txt-right">
										<view class="txt2">{{item.partTypeName}}</view>
									</view>
									<view class="txt-right">
										<view class="addnum color3">
											退还数量：{{item.amount}}；实际退还数量：{{item.factAmount}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="padding4"><u-gap height="1" bgColor="#f2f2f2" v-if="item.partRetrievalDetails.length>0"></u-gap></view>
					
					<view class="tuihuan" v-if="item.partRetrievalDetails.length>0">
						<view class="txt">退还批次信息</view>
						<view class="txt-item" v-for="(c,i) in item.partRetrievalDetails" :key="i">
							<view class="txt-title">{{c.batchNum+'-'+c.expireDate}}</view>
							<view class="txt-main">
								<view><text class="color7">退还数量：</text>{{c.amount}} </view>
								<view><text class="color7">单价：</text>{{c.price}}元 </view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="line">

			</view>
			<view class="detail-title white-bg detail-title-border">
				<view class="left-title">备注信息</view>
				<view class="right-title">{{listInfo.remark}}</view>
			</view>
			<view class="detail-title white-bg detail-title-border">
				<view class="left-title">退还审批人</view>
				<view class="right-title">{{listInfo.dealUserName}}</view>
			</view>
			<view class="detail-title white-bg detail-title-border">
				<view class="left-title">审核时间</view>
				<view class="right-title">{{listInfo.dealTime}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listInfo: {},
				detailId: '',
			}
		},
		onLoad(options) {
			if (options) {
				this.detailId = options.id;
			}
			this.getDetailInfo()
		},
		methods: {
			getDetailInfo() {
				uni.$u.http.get(`/device/mobile/devicePartRefund/getInfo/${this.detailId}`).then(res => {
					if (res.code == 0) {
						this.listInfo = res.data;
						console.log('this.listInfo====>', this.listInfo)
					}
				}).catch(err => {})
			},
		}
	}
</script>

<style lang="scss">
	.search-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		color: #2b2b2b;
		padding: 32rpx;
		background: #f2f2f2;
	}

	.search-list {
		background: #fff;
		margin-top: 2rpx;
		// padding: 0 16rpx;
		// border-top: 1px solid #f2f2f2;

		.search-item {
			padding: 32rpx;
			// border-bottom: 1px solid #f2f2f2;

			.item-top {
				display: flex;
				align-items: center;

				.item-name {
					color: #000000;
					font-size: 34rpx;
				}

				.item-txt {
					padding: 20rpx 0 20rpx 10rpx;
					display: flex;
					width: 100%;

					.left-icon {
						border-radius: 8rpx;

						image {
							width: 152rpx;
							height: 152rpx;
							border-radius: 8rpx;
						}
					}

					.right-txt {
						padding-left: 32rpx;
						display: flex;
						flex-flow: column;
						justify-content: space-between;
						width: 100%;

						.txt-left {
							display: flex;
							// align-items: center;
							justify-content: space-between;
							// height: 80rpx;

							.txt1 {
								font-size: 32rpx;
								color: #2B2B2B;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								word-break: break-all;
								word-wrap: break-word;
							}

							.txt-status {
								font-size: 30rpx;
								color: #1962e0;
							}
						}

						.txt-right {
							display: flex;
							align-items: flex-end;
							justify-content: space-between;
							// padding-top: 40rpx;
							// height: 72rpx;

							.txt2 {
								font-size: 28rpx;
								color: #8c8c8c;
							}

							.addnum {
								font-size: 28rpx;
								color: #8c8c8c;
							}
						}
					}
				}

			}


		}
	}

	.tuihuan {
		padding: 32rpx;

		.txt {
			font-size: 28rpx;
			color: #8c8c8c;
		}

		.txt-item {
			margin-top: 16rpx;
			padding: 16rpx;
			border-radius: 8rpx;
			background: #f2f2f2;

			.txt-title {
				font-size: 32rpx;
				color: #2B2B2B;
			}

			.txt-main {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 8rpx;
				font-size: 24rpx;
				color: #8c8c8c;
			}
		}

	}

	.line {
		background-color: #f2f2f2;
		height: 16rpx;
	}
	.status {
		// margin-top: 20rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		border-radius: 8rpx;
		font-size: 24rpx;
		padding: 0 20rpx;
	}

	.title-qbth {
		color: rgba(2, 173, 130, 1);
		background: rgba(40, 184, 105, 0.2);
	}

	.title-bfth {
		color: rgba(252, 119, 10, 1);
		background-color: rgba(252, 119, 10, 0.2);
	}

	.title-noth {
		color: rgba(255, 77, 77, 1);
		background-color: rgba(255, 77, 77, 0.2);
	}

</style>